<template>
  <div class="app-container">
    <page-filter
      v-model:query="filterInfo.query"
      :filter-list="filterInfo.list"
      :list-type-info="listTypeInfo"
      ref="pageFilter"
    >
      <template v-slot:filter-startTime>
        <el-date-picker
          @change="timeChange"
          v-model="time"
          :clearable="true"
          format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          type="datetimerange"
          size="small"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[
              new Date(2000, 1, 1, 0, 0, 0),
              new Date(2000, 1, 1, 23, 59, 59),
            ]"
        ></el-date-picker>
      </template>
    </page-filter>
    <!-- 表格 -->
    <table-container
      :refresh="tableInfo.refresh"
      :init-curpage="tableInfo.initCurpage"
      v-model:data="tableInfo.data"
      :api="tableInfo.api"
      :tab-index="true"
      :check-box="false"
      :query="filterInfo.query"
      :field-list="tableInfo.fieldList"
    >
    </table-container>
  </div>
</template>

<script setup name="requestLog">
import { getAccessPage } from "@/api/log";
import moment from "moment";
const { proxy } = getCurrentInstance();
onMounted(() => {
  proxy.$nextTick(() => {
    getList();
  });
});

const listTypeInfo = ref({
  typeList: [],
});
const time = ref([
  new Date(new Date().getTime() - 3600 * 1000 * 24),
  new Date(),
]);
const filterInfo = ref({
  query: {
    // startTimeGreater: moment(
    //   new Date(new Date().getTime() - 3600 * 1000 * 24)
    // ).format("YYYY-MM-DD HH:mm:ss"),
    // startTimeLess: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
    sort: "start_time desc",
  },
  list: [

    {
      label: "请求类型",
      value: "requestType",
      type: "select-model",
      code: "access_log_http",
      clearable: true,
      event: search,
    },
    {
      type: "input",
      label: "请求地址IP",
      value: "remoteIpLike",
      event: search,
    },
    {
      type: "input",
      label: "请求参数",
      value: "requestParamsLike",
      event: search,
    },
    { label: "消耗时间", value: "startTime", type: "slot" },
    { type: "button", label: "搜索", event: search },
    { type: 'button', label: '重置', event: clearSearch },
  ],
});
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: getAccessPage,
  data: [],
  selections: [],
  query: {
    sort: "start_time desc",
  },
  fieldList: [
    { label: "主键", value: "id" },
    { label: "请求类型", value: "requestTypeValue" },
    { label: "请求地址IP", value: "remoteIp" },
    { label: "请求url", value: "url" },
    { label: "请求参数", value: "requestParams" },
    { label: "返回数据", value: "responseBody" },
    { label: "请求开始时间", value: "startTime" },
    { label: "处理结束时间", value: "endTime" },
  ],
});

function getList() {
  tableInfo.value.refresh = Math.random();
}
function clearSearch() {
  filterInfo.value.query = {
    sort: "start_time desc"
  }
  time.value = []
  search()
}
function search() {
  tableInfo.value.initCurpage = Math.random();
  tableInfo.value.refresh = Math.random();
}

function timeChange(val) {
  if (val && val.length) {
    filterInfo.value.query.startTimeGreater = val[0];
    filterInfo.value.query.startTimeLess = val[1];
  } else {
    filterInfo.value.query.startTimeGreater = "";
    filterInfo.value.query.startTimeLess = "";
  }
}
</script>

<style scoped></style>
